<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ menu.title }}</title>
  <style>
    body {
      font-family: {{ menu.fontFamily }};
      background-color: {{ menu.backgroundColor }};
      color: {{ menu.textColor }};
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
      color: {{ menu.accentColor }};
      text-align: center;
      margin-bottom: 10px;
    }
    .description {
      text-align: center;
      margin-bottom: 20px;
      color: #666;
    }
    .category-tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    .category-tab {
      background-color: {{ menu.backgroundColor }};
      color: {{ menu.textColor }};
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 5px 15px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .category-tab:hover {
      background-color: {{ menu.accentColor }};
      color: white;
      border-color: {{ menu.accentColor }};
    }
    .category-tab.active {
      background-color: {{ menu.accentColor }};
      color: white;
      border-color: {{ menu.accentColor }};
    }
    .plugin-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }
    .plugin-item {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .plugin-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-color: {{ menu.accentColor }};
    }
    .plugin-icon {
      width: {{ menu.iconSize }}px;
      height: {{ menu.iconSize }}px;
      margin: 0 auto 10px;
      display: block;
    }
    .plugin-name {
      font-weight: bold;
      text-align: center;
      margin-bottom: 5px;
    }
    .plugin-desc {
      font-size: 14px;
      color: #666;
      text-align: center;
    }
    .category-title {
      color: {{ menu.accentColor }};
      margin-top: 30px;
      margin-bottom: 15px;
      padding-bottom: 5px;
      border-bottom: 2px solid {{ menu.accentColor }};
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>{{ menu.title }}</h1>
    <div class="description">{{ menu.description }}</div>
    <div class="category-tabs">
      {{each categories}}
      <div class="category-tab active" data-category="{{ $value }}">{{ $value }}</div>
      {{/each}}
    </div>
    {{each categories}}
    <div class="category-content" id="category-{{ $value }}">
      <h2 class="category-title">{{ $value }}</h2>
      {{if pluginsByCategory[$value] && pluginsByCategory[$value].length > 0}}
      <div class="plugin-list">
        {{each pluginsByCategory[$value]}}
        <div class="plugin-item" data-index="{{ $index }}">
          {{if menu.showIcon}}
          <img class="plugin-icon" src="" alt="插件图标">
          {{/if}}
          <div class="plugin-name">{{ $value.globalIndex }}. {{ $value.name }}</div>
        </div>
        {{/each}}
      </div>
      {{else}}
      <div class="no-plugins">该分类下暂无插件</div>
      {{/if}}
    </div>
    {{/each}}
  </div>
</body>
</html>